<section class="my-8">
	<div class="container mx-auto flex flex-col items-center pb-6 mb-4 md:p-10 md:px-12">
		<h1 class="text-4xl font-semibold leading-none text-center">
			What our customers are saying about us
		</h1>
	</div>
	<div
		class="container mx-auto grid grid-cols-1 gap-8 lg:gap-20 md:px-10 md:pb-10 lg:grid-cols-2"
	>
		<div class="flex flex-col items-center mx-12 lg:mx-0">
			<div class="relative text-center">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 512 512"
					class="absolute top-0 left-0 w-8 h-8"
					[ngClass]="['text' + neutral]"
					fill="currentColor"
				>
					<path d="M232,246.857V16H16V416H54.4ZM48,48H200V233.143L48,377.905Z" />
					<path d="M280,416h38.4L496,246.857V16H280ZM312,48H464V233.143L312,377.905Z" />
				</svg>
				<p class="px-6 py-1 text-lg italic">
					Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus
					quibusdam, eligendi exercitationem molestias possimus facere.
				</p>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 512 512"
					class="absolute bottom-0 right-0 w-8 h-8"
					[ngClass]="['text' + neutral]"
					fill="currentColor"
				>
					<path d="M280,185.143V416H496V16H457.6ZM464,384H312V198.857L464,54.1Z" />
					<path d="M232,16H193.6L16,185.143V416H232ZM200,384H48V198.857L200,54.1Z" />
				</svg>
			</div>
			<span class="w-12 h-1 my-2 rounded-lg" [ngClass]="['bg' + primary]"></span>
			<p class="">Leroy Jenkins</p>
		</div>
		<div class="flex flex-col items-center max-w-lg mx-12 lg:mx-0">
			<div class="relative text-center">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 512 512"
					class="absolute top-0 left-0 w-8 h-8"
					[ngClass]="['text' + neutral]"
				>
					<path
						fill="currentColor"
						d="M232,246.857V16H16V416H54.4ZM48,48H200V233.143L48,377.905Z"
					/>
					<path
						fill="currentColor"
						d="M280,416h38.4L496,246.857V16H280ZM312,48H464V233.143L312,377.905Z"
					/>
				</svg>
				<p class="px-6 py-1 text-lg italic">
					Accusantium illum cupiditate harum asperiores iusto quos quasi quis quae! Fugit
					doloribus, voluptatum quidem magnam velit excepturi nobis, reprehenderit ducimus
					incidunt quisquam quae veritatis, quos iure harum.
				</p>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 512 512"
					class="absolute bottom-0 right-0 w-8 h-8"
					[ngClass]="['text' + neutral]"
				>
					<path
						fill="currentColor"
						d="M280,185.143V416H496V16H457.6ZM464,384H312V198.857L464,54.1Z"
					/>
					<path
						fill="currentColor"
						d="M232,16H193.6L16,185.143V416H232ZM200,384H48V198.857L200,54.1Z"
					/>
				</svg>
			</div>
			<span class="w-12 h-1 my-2 rounded-lg" [ngClass]="['bg' + primary]"></span>
			<p class="">Leroy Jenkins</p>
		</div>
	</div>
</section>
